<template>
  <md-main class="md-user-info">
    <div class="user-info-main">
      <div class="item">
        <div class="label">用户名</div>
        <div class="value">{{userInfo?.userName}}</div>
      </div>

      <div class="item">
        <div class="label">用户昵称</div>
        <div class="value">{{userInfo?.nickName}}</div>
      </div>

      <div class="item">
        <div class="label">用户类型</div>
        <div class="value">{{userTypeEnum[userInfo?.userType]?.label || '---'}}</div>
      </div>

      <div class="item">
        <div class="label">邮箱</div>
        <div class="value">{{userInfo?.email}}</div>
      </div>

      <div class="item">
        <div class="label">手机</div>
        <div class="value">{{userInfo?.phonenumber}}</div>
      </div>

      <div class="item">
        <div class="label">备注</div>
        <div class="value">{{userInfo?.remark}}</div>
      </div>

      <div class="item">
        <div class="label">部门</div>
        <div class="value">{{userDept?.deptName}}</div>
      </div>

      <div class="item">
        <div class="label">岗位</div>
        <div class="value">
          {{userPostList.map(m => { return m.postName }).join('、')}}
        </div>
      </div>

      <div class="item">
        <div class="label">角色</div>
        <div class="value">
          {{userRoleList.map(m => { return m.roleName }).join('、')}}
        </div>
      </div>

      <div class="item">
        <div class="label">创建时间</div>
        <div class="value">{{userInfo?.createTime}}</div>
      </div>
    </div>
  </md-main>
</template>

<script>
import { getUser } from '@/api/system/user.service.js'
export default {
  name: 'MdPagesUserInfoComponent',
  data () {
    return {
      userTypeEnum,
      userInfo: null,
      userDept: null,
      userRoleList: [],
      userPostList: []
    }
  },
  mounted () {
    this.getCurrentUser()
  },
  methods: {
    /** 获取当前用户信息 */
    async getCurrentUser () {
      try {
        const user = this.$local.getItem('user')

        const res = await getUser(user.userId)

        if (res.data) {
          this.userInfo = res.data.user
          this.userDept = res.data.dept
          this.userRoleList = res.data.roleList
          this.userPostList = res.data.postList
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}

const userTypeEnum = {
  '00': { label: '系统用户' }
}
</script>

<style lang="less" scoped>
.md-user-info {
  .user-info-main {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 0px;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #efefef;
      &:last-child {
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 0px;
      }

      .label,
      .value {
        font-size: 15px;
      }

      .label {
        color: #333;
        width: 80px;
        text-align: left;
        font-weight: bold;
      }

      .value {
        flex: 1;
        color: #000;
        padding-left: 20px;
        text-align: right;
      }
    }
  }
}
</style>